<template>
    <div class="pre">
        <div v-show="!isNoMessage1" class="list">
            <div v-for="(item, index) in BarEcharts.list" :key="index" class="list-item">
                <div class="num" :class="{ 'num-active': index < 3 }">{{ index + 1 }}</div>
                <img class="icon-img" :src="item.work_user_avatar" alt="" />
                <div class="item-right">
                    <div class="name">{{ item.work_user_name }}</div>
                    <div class="progress-content">
                        <el-progress
                            class="progress"
                            :style="{ width: getPercentageWidth(item, index) }"
                            :percentage="100"
                            :show-text="false"
                            :stroke-width="10" />
                        <span class="progress-num">{{ item.num }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="isNoMessage1" class="no_data">
            <img class="no_img" src="@/assets/noData.png" alt="" />
            <div class="emty_title">暂无数据</div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, watch } from 'vue';
const props = defineProps(['topEcharts']);
const isNoMessage1 = ref(false);

const BarEcharts = reactive({
    yAxis: [],
    series: [],
    member: [],
    list: []
});

const compare = (data: any) => {
    return (a: any, b: any) => {
        return b[data] - a[data];
    };
};
const setArray = (arr: any) => {
    arr.sort(compare('num'));
    return arr;
};

const getPercentageWidth = (item: any, index: number) => {
    if (index === 0) {
        return '500px';
    }
    const maxNum = BarEcharts.list[0]?.num;
    const pWidth = (item.num / maxNum) * 500;
    return pWidth < 10 ? '10px' : pWidth + 'px';
};

//获取点赞占比数据
const getChart = async (data: any) => {
    BarEcharts.yAxis = [];
    BarEcharts.series = [];
    BarEcharts.member = [];
    BarEcharts.list = [];
    if (data.length == 0) {
        isNoMessage1.value = true;
        return;
    } else {
        isNoMessage1.value = false;
    }
    data = setArray(data);
    data.forEach((v: any) => {
        BarEcharts.list.push(v);
    });
};

// 点赞占比
watch(
    () => props.topEcharts,
    val => {
        getChart(val);
    },
    { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.pre {
    .list {
        margin: 30px 23px;

        .list-item {
            margin-bottom: 17px;
            display: flex;
            align-items: center;

            .num {
                width: 16px;
                font-size: 16px;
                font-family: PingFangSC-Medium, 'PingFang SC';
                font-weight: 500;
                color: #969696;
                line-height: 22px;
            }

            .num-active {
                color: #ff6b00;
            }

            .icon-img {
                margin-left: 29px;
                width: 36px;
                height: 36px;
                border-radius: 4px;
            }

            .item-right {
                flex: 0.7;
                margin-left: 12px;

                .name {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, 'PingFang SC';
                    font-weight: 400;
                    color: #33302d;
                    line-height: 20px;
                }

                .progress-content {
                    display: flex;
                    align-items: center;

                    .progress {
                        :deep(.el-progress-bar__outer) {
                            background: #fff;
                        }
                    }

                    .progress-num {
                        padding-left: 8px;
                        font-size: 14px;
                        font-family: STHeitiSC-Medium, STHeitiSC;
                        font-weight: 500;
                        color: #ff6b00;
                        line-height: 14px;
                    }
                }
            }
        }
    }

    .no_data {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .no_img {
            margin-left: 35px;
        }

        .emty_title {
            color: #909399;
            margin: 0;
        }
    }

    &_title {
        padding: 20px 30px;
        border-bottom: 1px solid #eaeaea;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .export {
            display: inline-block;
            width: 64px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            cursor: pointer;
        }
    }

    .title-text {
        line-height: 38px;
    }

    .min {
        // margin-left: 30px;
        // height: 100%;
    }
}
</style>
